<template>
  <div class="page">
    <div class="header-wapper">
      <div class="logo">
        测试demo
      </div>
      <div class="right-menu">
        <span class="right-menu-item" @click="goPersonalInfo">
          <img src="../assets/images/grxx@2x.png" alt="" style="width:12px;height:15px">
          <span class="title">个人信息</span>
        </span>
        <span class="right-menu-item" @click="changePass">
          <img src="../assets/images/edit.png" alt="" style="width:12px;height:14px">
          <span class="title">修改密码</span>
        </span>
        <span class="right-menu-item" v-if="!quiting" @click="handleQuit">
          <img src="../assets/images/tuichu@2x.png" alt="" style="width:14px;height:15px">
          <span class="title">退出</span>
        </span>
        <span v-else>
          <a-icon class="mr5 ml25" type="loading" />
        </span>
      </div>
    </div>
    <div class="main-wapper">
      <div class="navi-wapper">
        <Navi ref="navi"></Navi>
      </div>
        <router-view></router-view>
    </div>
    <a-modal v-model="visible" v-if="visible" title="修改密码" @ok="handleOk">
      <a-form :form="caseForm">
        <a-form-item label="旧密码：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-input style="width:300px" type="password" placeholder="输入旧密码" v-decorator="['originalPassword', { rules: [{ required: true, message: '输入旧密码' }] }]" />
        </a-form-item>
        <a-form-item label="新密码：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-input style="width:300px" type="password" placeholder="输入新密码" v-decorator="['password', { rules: [{ required: true, message: '输入新密码' }, {min: 6, max: 18, message: '密码长度6-18位'}] }]" />
        </a-form-item>
        <a-form-item label="重复密码：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-input style="width:300px" type="password" placeholder="重复输入新密码" v-decorator="['reenterPassword', { rules: [{ required: true, message: '重复输入新密码' }, {min: 6, max: 18, message: '密码长度6-18位'}] }]" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model="visibleSuccess" title="修改密码" on-ok="handleOk">
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="loading" @click="complete">
          确定
        </a-button>
      </template>
      <div class="complete-icon">
        <a-icon type="check" />
      </div>
      <div class="complete-tips">密码修改成功!</div>
    </a-modal>
  </div>
</template>

<script>
import Navi from '@/components/Navi.vue';
import { mapState, mapGetters } from 'vuex';
import { resetRouter } from '@/router';

export default {
  data() {
    return {
      collapsed: false,
      quiting: false,
      visible: false,
      caseForm: this.$form.createForm(this, { name: 'caseForm' }),
      visibleSuccess: false,
      loading: false,
    };
  },
  components: {
    Navi,
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['keepAlivePages']),
  },
  methods: {
    handleQuit() {
      this.quiting = true;
      this.$store.dispatch('fetchData', {
        method: 'GET',
        router: '/admin/auth/logout',
      }).then((res) => {
        setTimeout(() => { this.quiting = false; }, 500);
        if (res.code === '00000') {
          this.$store.commit('setToken', '');
          this.$store.commit('setNaviItems', []);
          this.$store.commit('setRolesRoutes', []);
          this.$store.commit('setOpenPages', []);
          sessionStorage.clear();
          resetRouter();
          this.$router.push('/login');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    goPersonalInfo() {
      this.$router.push('/PersonalInfo/PersonalInfo');
    },
    changePass() {
      this.visible = true;
    },
    handleOk(e) {
      e.preventDefault();
      this.caseForm.validateFields((err, values) => {
        if (!err) {
          // console.log('Received values of form: ', values);
          const condition = {
            originalPassword: values.originalPassword,
            password: values.password,
            reenterPassword: values.reenterPassword,
          };
          this.$store.dispatch('fetchData', {
            method: 'POST', router: '/admin/password/modify', condition,
          }).then((res) => {
            if (res.code === '00000') {
              this.visible = false;
              this.visibleSuccess = true;
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    complete() {
      this.visibleSuccess = false;
    },
  },
};
</script>

<style lang="stylus" scoped>
@import "../assets/css/common.stylus"
.page
  disflex(column, flex-start, flex-start)
  min-width 1000px
  overflow auto
  .header-wapper
    width 100%
    position relative
    padding-right 20px
    disflex(row, space-between, center)
    height 50px
    line-height 50px
    background-color white
    box-shadow 0px 2px 4px 0px rgba(0,0,0,0.2)
    .logo
      margin-right 8px
      margin-left 20px
      color #1B3068
      font-size 18px
      font-family FZLTZCHK--GBK1-0, FZLTZCHK--GBK1
      font-weight bold
    .right-menu
      font-size 14px
      user-select none
      color #1B3068
      font-weight: 400;
      disflex(row, space-between, center)
    .right-menu-item
      padding-left 28px
      display flex
      align-items center
      cursor pointer
      .title
        font-weight 400px
        padding-left 5px
  .main-wapper
    disflex(row, flex-start, flex-start)
    height calc(100vh - 50px)
    width 100%
.complete-icon
  height 46px
  width 46px
  background #00CC88
  border-radius 50%
  display flex
  align-items center
  justify-content center
  color #fff
  font-size 24px
  font-weight 900
  margin 0 auto
  margin-top 20px
.complete-tips
  text-align center
  font-size 16px
  color #333
  padding 16px 0 40px
</style>
